<!DOCTYPE html>
<html>
<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
    <title>金兔送福 新年献礼</title>

    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
			background-image: url(img/bg1.png);
			background-size: 100% 100% ;
			overflow: hidden;
			z-index: -99;

        }
		.main{
			width: 100%;
			height: 100%;
			position: relative;

		}
       .begin-btn {
		  
		  width: 450px;
		  height: 70px;
		  top: 93%;
		  left: 50%;
		  transform: translate(-50%,-50%);
		 position: absolute;

	   } 
	   
	   .begin-btn:hover {
		  cursor:pointer;
		  content: url(img/beginHover.png);
		  width: 450px;
		  height: 70px;
		  top: 93%;
		  left: 50%;
		  transform: translate(-50%,-50%);
		 position: absolute;

	   }
       .full-btn {
		  width: 48px;
		  height: 48px;
		  top: 10%;
		  right: 3%;
		  transform: translate(-50%,-50%);
		  position: absolute;
		 display: none;
	   }
       .close-btn {
		  width: 48px;
		  height: 48px;
		  top: 10%;
		  right: 6%;
		  transform: translate(-50%,-50%);
		  position: absolute;
		 display: none;
	   }
	   .title-div{
			font-size: 26px;
			color: #FFFFFF;
		    top: 25.5%;
		    left: 50%;
		    transform: translate(-50%,-50%);
		   position: absolute;
	   }
	   .result-btn {
	   		  width: 256px;
	   		  height: 88px;
	   		  top: 90%;
	   		  right: 5%;
	   		  transform: translate(-50%,-50%);
	   		 position: absolute;
             display: none;

	   }

	   .cmListDiv1{
	   		   position: absolute;
	   		   top: 50%;
	   		   left: 50%;
	   		  transform: translate(-50%,-50%);

	   }

	   .cmDiv2{
	   		   display: inline-block;
	   		   width: 360px;height: 450px;
	   		   background-image: url(img/error.png) ;
	   		   background-repeat: no-repeat;
	   		   background-size: 100% 100%;
	   		   margin-left: 10px;
	   		   color: #AC6925;
	   		   padding-top: 90px;
	   		   padding-left: 110px;
	   		   padding-right: 20px;

	   		   font-size: 28px;
	   }
	   
	   .leftDiv{
		   display: none;
		   color: #FFFFFF;
		  /* background-image: url(img/infoLeft.png);
		   background-repeat: no-repeat;
		   background-size: 100% 100%; */
			width: 320px;
		    height: 256px;
		    top: 30%;
		    left: 2%;
			padding-left: 60px;
		    position: absolute;
			font-family: "微软雅黑";
			font-weight: bolder;
			letter-spacing:5px;
			font-size: 36px;
		}
		.leftSpan1{
			display: block;
			margin-top: 48px;
			
		}
	   
		.leftSpan3{
			display: block;
			margin-top: 20px;
			font-size: 50px;
			float: right;
			
			color: #FBE169;
		}
	   
		.leftSpan2{
			display: block;
			margin-top: 100px;
		}
	   
		.leftSpan4{
			display: block;
			margin-top: 20px;
			font-size: 50px;
			float: right;
			color: #FBE169;
		}
	   
	   .rightDiv{
		   display: none;
		   color: #FFFFFF;
		   /* background-image: url(img/infoRight.png);
		   background-repeat: no-repeat;
		   background-size: 100% 100%; */
		   width: 350px;
		   height: 256px;
		   top: 31%;
		   right: 4%; 
		   position: absolute;
		   font-size: 36px;
		   font-family: "微软雅黑";
		   font-weight: bolder;
		   letter-spacing:5px;
	   }
	   .rightSpan1{
			display: block;
			margin-top: 36px;
			color: #FBE169;
			font-size: 40px;
	   }
	   	   
	   .rightSpan2{
			display: block;
			margin-top: 50px;
			
	    }
	   
	   .rightSpan3{
			display: block;
			margin-top: 40px;
			
			line-height: 30px;
	    }
	   
	   
	   	   
	   .rightSpan4{
			margin-top: 30px;
			font-size: 50px;
			color: #FBE169;
	    }
	   
	   .rightSpan5{
			display: block;
			margin-top: 40px;
			
			line-height: 30px;
	    }
	   
	   .rightSpan6{
			display: block;
			margin-top: 40px;
			
			line-height: 30px;
	    }
	   
	   
	   
    </style>
</head>
<body>
<div class="main">
	
   <button id='fullBtn' class="full-btn"  onclick="fullScreen()">全屏</button>
   <button id='closeBtn' class="close-btn"  onclick="exitFullScreen()">取消</button>

	<div class="leftDiv">
		<span id="leftspan1" class="leftSpan1">本期抽奖票数</span>
		<span id="leftspan3" class="leftSpan3"></span>
		<span id="leftspan2" class="leftSpan2">本期抽奖人数</span>
		<span id="leftspan4" class="leftSpan4"></span>
	</div>
	<div class="rightDiv">
		<span id="rightspan1" class="rightSpan1"></span>
		<!-- <span id="rightspan2" class="rightSpan2">本期抽取<span id="rightspan4" class="rightSpan4"></span>汽车</span>
		 -->
		<span id="rightspan3" class="rightSpan3">本期活动参与周期</span>
		<span id="rightspan5" class="rightSpan5"></span>
		<span id="rightspan6" class="rightSpan6"></span>
	</div>
	
	
   <img class="begin-btn" src="img/begin.png" onclick="toPage()"/>
   <img class="result-btn" src="img/result.png" onclick="toPage1()"/>
   <div id="err" style="display: none;" class="cmListDiv1">
    	<div class="cmDiv2">
   		<span  style="line-height: 60px;display: block;color: #B80909;font-size: 22px;margin-left: 100px;font-weight: bold;">错误提示</span>
   		<span id='errName' style="line-height: 60px;display: block;margin-top: 50px;"></span>
   	</div>
   </div>
</div>

<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/zepto.js"></script>

<script type="text/javascript">
    (function(){

			$.ajax({
				type: 'GET',
				url: server_url+'/lottery/lucky/config',
				dataType: 'json',
				success: function(data){
					if(data.data.secondTitle){
						$("#title").html(data.data.secondTitle)
						
						$("#rightspan1").html(data.data.secondTitle)
						$("#rightspan4").html(data.data.maxLucky+"辆")
						//$("#rightspan4").html("1辆")
						$("#rightspan5").html("起："+data.data.startDay)
						$("#rightspan6").html("止："+data.data.finishDay)
						
						
						
					}else{
						$('#err').css('display', 'block');
						$('#errName').html(data.data.errorMsg)
					}


				},
				error: function(xhr, type){
					console.log('-------------err')
				}
			})

		$.ajax({
			async:false,
			type: 'GET',
			url: server_url+'/lottery/lucky/users/1',
			dataType: 'json',
			success: function(data){
				$("#leftspan3").html(data.data.total+"张")
				$("#leftspan4").html(data.data.count+"人")
			},
			error: function(xhr, type){
				
			}
		})



    })();

	function toPage(){
		window.location.href = 'start.html'
	}
	function toPage1(){
		window.location.href = 'result.html'
	}
	function fullScreen() {
			var el = document.documentElement;
			var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
				el.mozRequestFullScreen || el.msRequestFullScreen;
			if (typeof rfs != "undefined" && rfs) {
				rfs.call(el);
			} else if (typeof window.ActiveXObject != "undefined") {
				var wscript = new ActiveXObject("WScript.Shell");
				if (wscript != null) {
					wscript.SendKeys("{F11}");
				}
			}

	}
	function exitFullScreen(el) {
		var el = document
		var cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen ||
			el.exitFullscreen,
			wscript
		if (cfs) {
			cfs.call(el);
			return;
		} else if (typeof window.ActiveXObject !== "undefined") {
			var wscript = new ActiveXObject("WScript.Shell");
			if (wscript != null) {
				wscript.SendKeys("{F11}");
			}
		} else {
			alert('浏览器不支持全屏API或已被禁用')
		}
	}

</script>
</body>
</html>
